<html>
<head>
<title>Canvas - Single Image</title>
<style>
  #sprite-cache {
    visibility: hidden;
  }
</style>
<script type="text/javascript" src="bench.js"></script>
<script type="text/javascript" src="sprites.js"></script>
<script type="text/javascript">
window.onload = init;

var NUM_SPRITES = 2000;
var canvas;
var context;

function init() {
  canvas = document.getElementById('canvas');
  context = canvas.getContext('2d');

  sprites.init(canvas.width, canvas.height);
  var image = document.getElementById('sprite-cache').children[0];
  for (var i = 0; i < NUM_SPRITES; ++i) {
    sprites.add(image);
  };

  bench.run(draw);
};

function draw() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  sprites.draw(context);
};
</script>
</head>

<body>
  <canvas id="canvas" width="800" height = "600">
  <div id="sprite-cache">
    <img src="images/image1_t.png" />
  </div>
</body>
</html>
